<template>
	<view class="content">
		<view class="form">
			<view class="titel">
				发票
			</view>
			<view class="itembox">
				<view class="name">
				   上传发票:
				</view>
				<view class="photo-list">
					<view v-for="(item,index) in form.guobangdan" :key="index" class="photo-item" @click="imgsBackBnt(index)">
						<view class="close-box" @click.stop="imgcloseaBnt(index)">
							<image class="icon" src="@/static/images/index/guanbi.png" mode=""></image>
						</view>
						<image style="width: 100%;height: 100%;" :src="baseUrl + item" mode="scaleToFill"></image>
					</view>
					<view class="photo-item" v-if="form.guobangdan.length < 5" @click.stop="addphotoBackBnt()">
						<image class="images" src="@/static/images/index/add.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="bnt" @click="addBnt()">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		goodsSaledoGongxuUserMoneyInfo,
		addBaogong,
		goodsSaleEdit,
		goodsSaledoGongxuUsersMoneyInfo,
		lvDaohuoUpdate,
		editGuobangdan
	} from "@/api/system/index"
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
				baseUrl:config.baseUrl,
				datetimesingle: '',
				info:{},
				form:{
					guobangdan:[],
					// guobangDate:'',
					// guobangDun:''
				}
			}
		},
		onLoad(e) {
			this.info = JSON.parse(e.info)
			this.form.guobangdan = this.info.guobangdan.split(',')
			// this.form.guobangDate = this.info.guobangDate
			// this.form.guobangDun = this.info.guobangDun
			// this.getInfo()
		},
		watch: {
			datetimesingle(newval) {
				console.log('单选:', this.datetimesingle);
			},
		},
		mounted() {
			setTimeout(() => {
				this.datetimesingle = Date.now() - 2*24*3600*1000
			},3000)
		},
		methods: {
			jianting() {
				var pages = getCurrentPages();
				console.log(pages.length);
				var Page = pages[pages.length-1];//当前页
				console.log(pages[pages.length-1].route);//输出当前路由
				var prevPage = pages[pages.length-2];
				console.log(pages[pages.length-2].route);//输出上一个页面的路由
				if(pages[pages.length-2].route == 'pagesA/receivingRecord/index'){  //确定要返回到相应页面，在触发
				    prevPage.$vm.reload()
				}
			},
			changeLog(e) {
				console.log('change事件:', e);
			},
			bindDateChange(e) { // 新增日期选择事件
				this.form.guobangDate = e.target.value
			},
			getinfo() {
				goodsSaledoGongxuUsersMoneyInfo().then(res=>{
					
				})
			},
			onKeyInput (event) {
				this.info.count = event.target.value
				this.info.allMoney = event.target.value*this.info.money
			},
			getInfo() {
				goodsSaledoGongxuUserMoneyInfo(this.id).then(res=>{
					console.log('成功了吗')
				})
			},
			imgsBackBnt(e) {
				var arr = this.form.guobangdan;
				var arr1 = JSON.parse(JSON.stringify(arr)) //深拷贝常用方法
				let data = arr1
				for (var i = 0; i < data.length; i++) {
					data[i] = this.baseUrl + data[i]
				};
				console.log(data)
				uni.previewImage({
					current: e,
					urls: data,
				});
			},
			imgcloseaBnt(index) {
				console.log('删除')
				this.form.guobangdan.splice(index, 1);
			},
			addphotoBackBnt() {
				uni.chooseImage({
					count: 5 - this.form.guobangdan.length,
					type: 'image',
					success: (res) => {
						for (var i in res.tempFilePaths) {
							uni.showLoading({
								title: '上传图片中~',
								mask: true
							})
							uni.uploadFile({
								url:this.baseUrl + '/common/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								header: {
									Authorization:'Bearer ' +  uni.getStorageSync('App-Token')
								},
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code == 200) {
										// this.$tools.toast('上传成功～')
										uni.hideLoading();
										if (this.form.guobangdan.length < 5) {
											this.form.guobangdan.push(JSON.parse(uploadFileRes.data).fileName)
										}
										// this.form.guobangdan = JSON.parse(uploadFileRes.data).url
									} else {
										uni.hideLoading();
										// this.$tools.toast('图片上传失败，请重试～')
									}
								}
							});
						}
					}
				});
			},
			addBnt(e) {
				uni.showModal({
					title: '提示',
					content: '确定上传过磅单吗？',
					success :(res)=> {
						if (res.confirm) {
							var data = {}
							data.guobangdan =this.form.guobangdan.join(',')
							data.id = this.info.id
							// data.guobangDate = this.form.guobangDate 
							// data.guobangDun = this.form.guobangDun
							lvDaohuoUpdate(data).then(res=>{
								setTimeout(res=>{
									uni.navigateBack()
									this.jianting()
								},100)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}

	}
</script>

<style lang="scss">
	.content {
		padding-left: 20rpx;
		padding-right: 20rpx;
		.form {
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			.titel {
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				color: #333;
				font-size: 28rpx;
				font-weight: bold;
			}
			.itembox {
				border-top: 1px solid #EDEDED;
				display: flex;
				align-items: center;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.name {
					text-align: right;
					width: 160rpx;
					color: #999;
					font-size: 28rpx;
				}
				.inputBox {
					padding-left: 20rpx;
					width: 600rpx;
					color: #333;
					font-size: 28rpx;
				}
				.photo-list {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
				}
				.photo-item {
					margin-left: 18rpx;
					margin-top: 20rpx;
					width: 148rpx;
					height: 148rpx;
					border-radius: 12rpx;
					background: #F7F6F9;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					.images {
						width: 60rpx;
						height: 60rpx;
					}
					.close-box {
						position: absolute;
						display: flex;
						align-items: center;
						justify-content: center;
						top: 0;
						right: 0;
						width: 45rpx;
						height: 45rpx;
						background: rgba(0, 0, 0, 0.60);
						border-radius: 0 8rpx 0 8rpx;
						z-index: 5;
						
						.icon {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}
			}
		}
		.bottom-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			padding: 30rpx;
			padding-bottom: 120rpx;
			height: 120rpx;
			background: #ffffff;
			display: flex;
			justify-content: center;
			.bnt {
				color: #ffffff;
				width: 306rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				background: #4D8987;
			}
		}
	}
</style>